<template>
  <div class="box">
    <Silder :Img="ChosenInfoData.bannerimgs"/>
    <div class="wrapper">
      <div class="title">{{ChosenInfoData.title}}</div>
      <ChosenListView :ListData="ChosenInfoData.list"/>
    </div>
    <FootNav/>
  </div>
</template>

<script>
import FootNav from "@/components/FootNav";
import ChosenListView from "./Components/ChosenListView";
import Silder from "@/components/Silder";
export default {
  name: "Chosen",
  components: {
    FootNav,
    ChosenListView,
    Silder
  },
  data() {
    return {
      ChosenInfoData: {
        // 注意:有length必须写这个
        bannerimgs: []
      },
      // 轮播图配置
      swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
    };
  },
  mounted() {
    this.$api.ChosenInfo.ChosenList(null)
      .then(res => {
        this.ChosenInfoData = res.data;
        // console.log(this.ChosenInfoData.list);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>
<style scoped lang="less">
.box{
  margin-top: 104/20rem;
  margin-bottom: 50px;
}
.wrapper {
  margin: 0 5px;
}
.title {
  color: rgba(23, 24, 24, 1);
  font-size: 0.8rem;
  margin: 5px 0;
  letter-spacing: 0.1rem;
}
</style>